{:runhook('system_admin_index')}
<div v-cloak id="app" class="main-content">
    <el-row :gutter="20">
        <el-col span="6">
            <el-card shadow="hover">
                <div class="title">系统版本</div>
                <div class="conetne">{:config('one.name')}-{:config('one.version')}</div>
            </el-card>
        </el-col>
        <el-col span="6">
            <el-card shadow="hover">
                <div class="title">服务器环境</div>
                <div class="conetne">{$Think.const.PHP_OS} / {$_SERVER["SERVER_SOFTWARE"]}</div>
            </el-card>
        </el-col>
        <el-col span="6">
            <el-card shadow="hover">
                <div class="title">PHP/MySql版本</div>
                <div class="conetne">{$Think.const.PHP_VERSION} / MySql {:db()->query('select version() as
                    version')[0]['version']}</div>
            </el-card>
        </el-col>
        <el-col span="6">
            <el-card shadow="hover">
                <div class="title">ThinkPHP版本</div>
                <div class="conetne">{$Think.VERSION}</div>
            </el-card>
        </el-col>

    </el-row>
    <one-tabs :option="tabData" @change="tabsChange"></one-tabs>

    <div>
        <i class="el-icon-info"></i>点击可复制 使用示例 <span>&lt;i
            class=&quot;{{`${tabData.current == 'mdi' ? 'mdi ' : ''}`}}{{showData[0]}}&quot;&gt;&lt;/i&gt;</span>
    </div>
    <div class="icons" id="icons" flex="main:left wrap:wrap">
        <div v-for="(v,i) in showData" class="copy-text" :data-clipboard-text="v" @click="copyText" :title="v"
            flex="main:center cross:center">
            <i :class="`${tabData.current == 'mdi' && 'mdi'} ${v}`"></i>
            <!-- <span></span> -->
        </div>
    </div>
    <el-pagination background layout="total, prev, pager, next, slot" :page-size="pagination.pageSize"
        :current-page="pagination.pageNumber" @current-change="currentChange" :total="pagination.totalRows">

    </el-pagination>

</div>
{include file='common@components/one-tabs'}
<script src="__STATIC__/js/icon.js?v=1.0.0"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pagination: {
                    totalRows: 0, //总条数
                    pageSize: 100, //每页显示条数
                    pageNumber: 1
                },
                tabData: {
                    current: 'element',
                    column: [{
                        'label': 'elementUI(' + _oneIcons.element.length + ')',
                        'name': 'element',
                    }, {
                        'label': 'Material Design Icons(' + _oneIcons.mdi.length + ')',
                        'name': 'mdi',
                    }]
                },
                showData: [],
            }
        },
        created() {
            // this.total=this.icons.mdi.length
        },
        mounted: function () {
            this.$nextTick(function () {
                // 初始化渲染
                this.pagination.pageNumber = 1
                // 得到总数据tableDataAll进行分页
                this.dataPagination(_oneIcons[this.tabData.current])
            })
        },
        methods: {
            tabsChange(e) {
                this.pagination.pageNumber = 1
                this.dataPagination(_oneIcons[e.name])
            },
            currentChange(val) {
                //页码改变
                this.pagination.pageNumber = val
                this.dataPagination(_oneIcons[this.tabData.current])
            },
            sizeChange(val) {
                //切换每页显示条数
                this.pagination.pageSize = val
                this.dataPagination(_oneIcons[this.tabData.current])
            },
            // 数据分页
            dataPagination(dataList) {
                if (!dataList || dataList.length <= 0) {
                    dataList = []
                    this.tableData = []
                }
                if (dataList.length <= this.maxUsePage) {
                    this.tableData = dataList
                    return
                }
                let pageNo = this.pagination.pageNumber
                let pageSize = this.pagination.pageSize
                var offset = (pageNo - 1) * pageSize
                this.pagination.totalRows = dataList.length
                this.showData = (offset + pageSize >= dataList.length) ?
                    dataList.slice(offset, dataList.length) :
                    dataList.slice(offset, offset + pageSize)
            }
        }
    })
</script>
<style>
    .title {
        color: #009900;
    }
    .conetne {
        margin-top: 20px;
    }
    div.icons {
        cursor: pointer;
        height: 100%;
    }
    div.icons div {
        border: solid 1px #eee;
        width: 80px;
        height: 80px;
        margin: 5px;
    }
    div.icons div:hover {
        border: solid 1px #00C250;
    }
    div.icons div i {
        color: #666;
        cursor: pointer;
        font-size: 60px;
    }
</style>